import { ref } from 'vue'

/**
 * UI状态管理Hook
 * 管理各种UI组件的显示状态、标签页状态等
 */
export function useUIState() {
  // 当前活动的标签页
  const activeTab = ref('hierarchy')
  
  // Markdown编辑器标签页
  const markdownTab = ref('edit')
  
  // 关系管理相关状态
  const relationActiveTab = ref('page-category')
  
  // 内容查看对话框相关状态
  const showContentViewDialog = ref(false)
  const currentViewItem = ref(null)
  const showContentEditor = ref(false)
  
  // 独立Markdown编辑页面状态
  const showMarkdownEditor = ref(false)
  const currentEditItem = ref(null)
  
  // 图标上传相关状态
  const iconPreviewUrl = ref('')
  
  // 表单弹窗选项卡状态
  const activePageTab = ref('basic')
  const activeCategoryTab = ref('basic')
  const itemFormTab = ref('basic')
  
  // 分类项目关系管理对话框相关状态
  const showCategoryItemDialog = ref(false)
  const currentCategory = ref(null)
  
  /**
   * 重置所有UI状态到初始值
   */
  const resetUIState = () => {
    activeTab.value = 'hierarchy'
    markdownTab.value = 'edit'
    relationActiveTab.value = 'page-category'
    showContentViewDialog.value = false
    currentViewItem.value = null
    showContentEditor.value = false
    showMarkdownEditor.value = false
    currentEditItem.value = null
    iconPreviewUrl.value = ''
    activePageTab.value = 'basic'
    activeCategoryTab.value = 'basic'
    itemFormTab.value = 'basic'
    showCategoryItemDialog.value = false
    currentCategory.value = null
  }
  
  /**
   * 打开内容查看对话框
   * @param {Object} item - 要查看的项目对象
   */
  const openContentViewDialog = (item) => {
    currentViewItem.value = item
    showContentViewDialog.value = true
  }
  
  /**
   * 关闭内容查看对话框
   */
  const closeContentViewDialog = () => {
    showContentViewDialog.value = false
    currentViewItem.value = null
    showContentEditor.value = false
  }
  
  /**
   * 打开Markdown编辑器
   * @param {Object} item - 要编辑的项目对象
   */
  const openMarkdownEditor = (item) => {
    currentEditItem.value = item
    showMarkdownEditor.value = true
  }
  
  /**
   * 关闭Markdown编辑器
   */
  const closeMarkdownEditor = () => {
    showMarkdownEditor.value = false
    currentEditItem.value = null
  }
  
  /**
   * 打开分类项目关系管理对话框
   * @param {Object} category - 分类对象
   */
  const openCategoryItemDialog = (category) => {
    currentCategory.value = category
    showCategoryItemDialog.value = true
  }
  
  /**
   * 关闭分类项目关系管理对话框
   */
  const closeCategoryItemDialog = () => {
    showCategoryItemDialog.value = false
    currentCategory.value = null
  }
  
  return {
    // 标签页状态
    activeTab,
    markdownTab,
    relationActiveTab,
    activePageTab,
    activeCategoryTab,
    itemFormTab,
    
    // 对话框状态
    showContentViewDialog,
    currentViewItem,
    showContentEditor,
    showMarkdownEditor,
    currentEditItem,
    showCategoryItemDialog,
    currentCategory,
    
    // 其他UI状态
    iconPreviewUrl,
    
    // 方法
    resetUIState,
    openContentViewDialog,
    closeContentViewDialog,
    openMarkdownEditor,
    closeMarkdownEditor,
    openCategoryItemDialog,
    closeCategoryItemDialog
  }
}